<template>
  <div class="header-wrapper">
    <header class="header">
      <el-image :src="icon_image" fit="contain" class="logo"/>
      <div class="right">
        <div class="menus">
          <template v-for="item in menus" >
            <el-dropdown class="dropdown" v-if="item.children.length">
              <span class="dropdown">{{item.meta.title}}</span>
              <template #dropdown>
                <el-dropdown-item v-for="menu in item.children">
                  <span class="dropdown">{{menu.meta.title}}</span>
                </el-dropdown-item>
              </template>
            </el-dropdown>
            <div class="dropdown" @click="to(item)" v-else>{{item.meta.title}}</div>
          </template>
          <span @click="handleLogout" class="dropdown">退出</span>
        </div>

        <el-tooltip
            effect="dark"
            content="个人中心"
        >
          <el-image :src="userInfo.avatar?userInfo.avatar:header_image" fit="contain" class="avatar"
                    @click="toUserInfo"/>
        </el-tooltip>
      </div>
    </header>
    <!--占位高度容器，这样在使用这个组件时，目标页面不用写margin-top来顶开-->
    <div class="header-placeholder"></div>
  </div>
</template>

<script setup>
import {computed, defineProps} from 'vue'
import icon_image from '/src/assets/icon.png'
import header_image from '/src/assets/header.png'
import {useUserConfig} from "/@/stores/UserInfoConfig";
import {useRouter, useRoute} from 'vue-router'
import {useLogout} from '/@/components/hzsystem/LoginPublicFuncation';

const {handleLogout} = useLogout()

const props = defineProps({
  menus: {
    type: Array,
    default: () => {
      return [
        {
          name: 'Home',
          meta: {
            title: '首页'
          },
          children: []
        },
        {
          name: '菜单2',
          meta: {
            title: '菜单2'
          },
          children: [
            {
              name: '菜单2-1',
              meta: {
                title: '菜单2-1'
              },
              children: []
            },
            {
              name: '菜单2-2',
              meta: {
                title: '菜单2-2'
              },
              children: []
            }
          ]
        },
      ]
    }
  }
})

const router = useRouter()
const route = useRoute()

const useUser = useUserConfig();
const {userInfo} = storeToRefs(useUser);

const getRouters = computed(() => router.getRoutes())

const currentRoute = computed(() => route.path)

const to = target => {
  if (!target.children.length) {
    router.push({name: target.name})
  }
}

const toUserInfo = () => {
  router.push({name: 'UserInfo'})
}
</script>

<style scoped lang="scss">
:root {
  --header-height: 0px;
}

.header-wrapper {
  position: relative;
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  color: #333;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  height: 60px;
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.3) -1px 2px 2px;
  cursor: pointer;

  .logo {
    width: 100px;
    height: 40px;
  }

  .right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .menus {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .dropdown {
        margin: 0 16px;
        outline: none; /* 移除默认轮廓 */
        border: none; /* 移除默认边框 */
        font-size: 16px;
        color: #333;
        &:hover {
          color: #409eff;
          font-weight: 600;
          outline: none;
          border: none;
          box-shadow: none;
        }
      }

      .item {
        margin: 0 10px;

        &:hover {
          color: #409eff;
          font-weight: 600;
        }
      }

      .active {
        color: #409eff;
        font-weight: 600;
      }
    }
  }
}

.header-placeholder {
  height: 60px;
}
</style>
<style scoped>
/* 覆盖 el-dropdown 的默认样式 */
.el-tooltip__trigger {
  outline: none;
  border: none;
}

/* 悬停时的样式 */
.el-tooltip__trigger:hover {
  outline: none;
  border: none;
  box-shadow: none;
}
</style>
